<template>
  <div>
    <div>
      不想做笔记，记得有一个异步组件和传送组件这东西。
      异步组件需要包裹在Suspense标签里面，传送组件有个to的属性，值为标签名称或者类名
    </div>
    <div>
      异步组件有一个优点，代码打包不会放到主js文件里面去，会单独生成一个js文件，就是用到的时候才会去加载
    </div>
    <communicationSon
      v-model:isShow="isShow"
      @_click="getName"
      title="父子通讯"
      acc="wad"
      :arrNum="[1, 2, 3]"
      ref="communication_son"
    >
      <!-- <template v-slot="{ data }">  v-slot和#default效果一样-->
      <template #default="{ data }">
        <div>{{ data }}</div>
      </template>
    </communicationSon>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import communicationSon from "../components/communication_son.vue";
// 接受组件实例
const communication_son = ref<InstanceType<typeof communicationSon>>();
// const communication_son = ref();    这样写和上面比好像没区别
setTimeout(() => {
  console.log(communication_son.value?.age);
  console.log(communication_son);
});

const isShow = ref(false);
const getName = (name: string) => {
  console.log(name, "父");
};
watch(isShow, () => {
  console.log(isShow);
});

const test = getName("zi");
console.log(test);
</script>

<style lang="scss" scoped></style>
